<template>
	<view v-if="isShow" class="wrap-total" :style="{width: windowsW, height: windowsH}">
		<view class="wrap-content">
			<view class="wrap-white">
				<text class="nickname">主播邀请您进行{{type == 1? '视频' : '语音'}}连麦</text>
				
				<view class="btn-bg">
					<view class="btn cancel" @click="onCancel">
						<text class="cancel-title">暂不连麦</text>
					</view>
					
					<view class="btn sure" @click="onSure">
						<text class="sure-title">确认连麦</text>
					</view>
				</view>
			</view>
			
			<view class="avatar-bg">
				<image class="avatar" :src="avatar"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage.js';
	import {
		userAcceptLM
	} from "@/api/newLive.js";
	import st from "@/utils/showtoast.js";
	
	export default {
		data() {
			return {
				windowsW: uni.getSystemInfoSync()["windowWidth"],
				windowsH: uni.getSystemInfoSync()["windowHeight"],
				isShow: false,
				nickname: "",
				avatar: "",
				type: 1,
				applyID: "",
			}
		},
		mounted() {
			uni.$on("zbApplyYHLM", (info) => {
				let userInfo = storage.getLiveRoomInfo().user
				this.nickname = userInfo.username
				this.avatar = userInfo.avatar
				this.type = info.type
				this.applyID = info.apply_id
				
				this.isShow = true
			})
			
			uni.$on("onAndroidBackPress", () => {
				this.onDestroyed()
			});
		},
		methods: {
			/**
			 * 销毁
			 */
			onDestroyed() {
				uni.$off("zbApplyYHLM")
				uni.$off("onAndroidBackPress")
			},
			
			/**
			 * 取消
			 */
			onCancel() {
				this.handleLMData(2)
			},
			/**
			 * 确定连麦
			 */
			onSure() {
				this.handleLMData(1)
			},
			
			async handleLMData(pass) {
				let res = await userAcceptLM(storage.getLiveRoomInfo().id, this.applyID, pass)
				if (pass == 1) {
					st.success("连麦成功")
				}
				this.isShow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap-total {
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.wrap-content {
		width: 540rpx;
		overflow: hidden;
		position: relative;
	}
	.avatar-bg {
		position: absolute;
		left: 190rpx;
		top: 0;
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		overflow: hidden;
	}
	
	.wrap-white {
		margin-top: 80rpx;
		width: 540rpx;
		background-color: white;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.nickname {
		margin-top: 120rpx;
		color: #1B1B1B;
		font-size: 30rpx;
	}
	
	.btn-bg {
		margin-top: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 50rpx;
	}
	
	.btn {
		width: 220rpx;
		height: 82rpx;
		border-radius: 41rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	.cancel {
		background-color: #E5E5E5;
	}
	.cancel-title {
		color: #999999;
		font-size: 28rpx;
	}
	
	.sure {
		margin-left: 22rpx;
		background: $grad-color;
	}
	
	.sure-title {
		color: white;
		font-size: 30rpx;
	}
</style>